<template>
  <el-card style="height: 70px;width: 70%;margin: auto;margin-top: 60px;">
    <el-row>
      <el-col>
    <el-form :inline="true">
      <el-form-item label="角色名称" style="width: 270px">
        <el-input placeholder="请输入名称" v-model="searchRoleForm.name" @keydown.enter="loadRole"></el-input>
      </el-form-item>
      <el-form-item label="状态" style="width: 270px">
        <el-select placeholder="请选择状态" v-model="searchRoleForm.status" @keydown.enter="loadRole">
          <el-option label="全部" value="0"></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="停用" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadRole">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button style="margin-right: 25vh;background-color: crimson;color: #fff;"@click="addRole">添加角色</el-button>
      </el-form-item>
    </el-form>
      </el-col>
    </el-row>
  </el-card>
  <!-- 用户表格卡片 -->
  <el-card style="height: 400px;width: 70%;margin:20px auto;">
    <el-table :data="roleArr">
     <el-table-column type="index" label="ID" align="center" width="80"></el-table-column>
      <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
      <el-table-column prop="description" label="功能权限" align="center" ></el-table-column>
      <el-table-column prop="status" label="状态" align="center"
                       :formatter="RoleStatusFormatter"></el-table-column>
      <el-table-column prop="operation" label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="editRole(scope.row.id)">修改</el-button>
          <el-button type="primary" link @click="deleteRole(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
 <!--新增角色弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-form-item label="角色名称">
        <el-input placeholder="请输入名称" v-model="saveRoleFrom.name"></el-input>
      </el-form-item>
      <el-form-item label="功能权限">
        <el-input placeholder="请输入功能权限" v-model="saveRoleFrom.description"></el-input>
      </el-form-item>
      <el-form-item label="状态">
      <el-select placeholder="请选择状态" v-model="saveRoleFrom.status">
        <el-option label="全部" value="0"></el-option>
        <el-option label="正常" value="1"></el-option>
        <el-option label="停用" value="2"></el-option>
      </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveRole">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
//定义
//定义对象用来保存用户的查询条件
/*const searchRoleForm = ref({username:'',status:''}); */

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const roleArr = ref([]);
const  searchRoleForm = ref({name:'',status:''})
const resetSearch = () =>{
  searchRoleForm.value = {name:'',status: ''};
  loadRole();
}
const RoleStatusFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 1){
    cellValue = '正常';
  }else if(cellValue == 2){
    cellValue = '停用';
  }
  return cellValue;
}
const loadRole = () =>{
  let data = qs.stringify(searchRoleForm.value);
  console.log("数据",data)
  axios.get(BASE_URL+'/v1/role/select?'+data)
      .then((response)=>{
        if (response.data.code ==2000){
          console.log(response.data.data)
         roleArr.value = response.data.data
        }else {
          ElMessage.error(response.data.message)
        }
      })
}
onMounted(()=>{
   loadRole();
})
//定义变量用来保存弹窗标题
const dialogTitle = ref('新增角色');
//定义变量用来保存弹窗是否可见
const dialogVisible = ref(false);
//定义点击"新增角色"按钮时调用的方法
const addRole = () => {
  dialogTitle.value = '新增角色';
  dialogVisible.value = true;
}
//定义保存角色的数据
const saveRoleFrom = ref({name:'',description:'',status:''});
//定义保存角色的方法
const saveRole =()=>{
  let data = qs.stringify(saveRoleFrom.value);
  axios.post(BASE_URL+'/v1/role/save',data)
      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('保存成功!');
          saveRoleFrom.value={};//清空表单数据;
          dialogVisible.value = false;//弹窗关闭
          loadRole();//重新加载数据
        }else if(response.data.code=3001){
          ElMessage.error(response.data.data)
        }else {
          ElMessage.error(response.data.message)
        }
      })
}
//定义弹窗取消保存
const handleClose =() =>{
  if (confirm('您确定要取消保存吗?')){
    saveRoleFrom.value={};
    dialogVisible.value=false;
  }
}
//定义编辑方法
const editRole = (id) => {
  dialogTitle.value = '编辑角色';
  dialogVisible.value = true;
  axios.get(BASE_URL + '/v1/role/select?id=' + id)
      .then((response) => {
        if (response.data.code == 2000) {
          saveRoleFrom.value = response.data.data[0];
        } else {
          ElMessage.error(response.data.message);
        }
      })
}
//定义删除角色方法
const deleteRole = (id) =>{
  if (confirm("您确定要删除这条信息吗?"))
    axios.post(BASE_URL+'/v1/role/delete/'+id)
        .then((response)=>{
          if (response.data.code == 2000){
            ElMessage.success('删除成功!')
            loadRole();
          }else {
            ElMessage.error(response.data.message);
          }
        })

  }
</script>


<style scoped>

</style>